<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>菜单栏</title>
    <script src="jQuery.js"></script>
    <script>
        $(document).ready(function () {
            $(".nav li").hover(function () {
               // $(this).children(".jnNav").show();         //鼠标在LI上面，二级目录显示
               if ($(this).children(".jnNav").is(":animated")) { $(this).children(".jnNav").stop(true);  }
               // if ($(".nav li").children(".jnNav").is(":animated")) { $(".nav li").children(".jnNav").stop(true,true);}
                $(this).children(".jnNav").slideDown("fast");      //鼠标在LI上面，二级目录显示下滑效果
            }, function () {
                $(this).children(".jnNav").slideUp("fast");      //鼠标离开LI上面，二级目录隐藏上拉效果
               // $(this).children(".jnNav").hide();       //鼠标离开LI上面，二级目录隐藏
            })

        })

    </script>
    <style type="text/css">
        .mainNav {
            position: absolute; /*定义主导航条位置*/
            top: 0;
            left: 0;
            height: 37px;
            line-height: 37px; /*设置行高 ， 使内部内容垂直中间显示*/
            width: 990px;
            z-index: 100; /*设置叠放层次100，防止其他层覆盖*/
            background-color: #4A4A4A;
        }

        .nav { /*设置无序列表ul显示为内联样式inline,向左浮动*/
            margin: 0px 0px 0px 25px;
            display: inline;
            float: left;
        }

            .nav li { /*设置向左浮动 ，这样li元素全部会在一行，显示同样设置为内联样式*/
                float: left;
                display: inline;
                margin-right: 14px;
                position: relative; /*使jnNav相对于LI 偏移*/
                z-index: 100; /*防止其他层覆盖*/
            }

                .nav li a { /*显示为块，方便控制a的大小，鼠标在整个块级元素内均能选中，这里定义所有的A，可以设置ID具体定义*/
                    display: block;
                    padding: 0px 8px;
                    font-weight: 700;
                    color: #fff;
                    font-size: 14px;
                    text-decoration: none; /*去除文字下划线*/
                }

                    .nav li a:hover { /*鼠标滑动设置背景色  ，这里定义所有的A，可以设置ID具体定义*/
                        background: #ffd800;
                    }

        /*  二级菜单*/
        .jnNav {
            background-color: #fff; /*设置每个二级菜单，背景色为白色*/
            border: 1px solid #b1b1b1; /*边框为1个像素及颜色*/
            border-top: 0px; /*取消上方边框*/
            left: 0px; /*相对于父元素LI，左侧对齐*/
            overflow: hidden; /*内容超出范围隐藏*/
            position: absolute; /*绝对定位，相对于LI*/
            top: 37px; /*LI的高度为37PX，这里设置37px，刚好与li底部衔接*/
            width: 474px;
            z-index: 1000; /*防止覆盖*/
            display: none;
        }

        .subitem { /*设置二级菜单内部层*/
            float: left; /*左侧浮动*/
            height: auto;
            min-height: 100px; /*最小高度为100px*/
            padding: 10px 12px; /*左右内部各填充12px，上下填充10px*/
            width: 450px; /*宽度450+12+12，正好为父DIV的宽度*/
        }

            .subitem dl { /*设置自定义列表*/
                border-top: 1px dashed #c4c4c4; /*上方设置边框*/
                overflow: hidden; /*超出部分隐藏*/
                padding: 8px 0px; /*上下设置填充8px*/
                float: left; /*所有自定义列表向左浮动，两个列表就会分层显示*/
            }

        .fore {
            border-top-style: none;
            padding-top: 0px;
        }

        .subitem dt { /*设置自定义列表的标题*/
            float: left; /*向左浮动*/
            font-weight: bold;
            line-height: 16px;
            padding: 4px 3px;
            text-align: center; /*文本显示居中*/
            width: 76px; /*每个标题宽度设置*/
        }

            .subitem dt a { /*设置标题中链接文本的颜色，字体大小，粗体*/
                color: #000;
                font-weight: 700;
                font-size: 12px;
                padding: 0px;
            }

        .subitem dd { /*设置自定义列表的条目，左侧浮动，每个条目的总宽度为364PX,内部无填充*/
            float: left;
            overflow: hidden;
            padding: 0px;
            width: 364px;
        }

        .subitem em { /*设置条目中的每个内容元素*/
            border-right: 1px solid #ccc; /*右侧设置边框，用于隔开每个内容*/
            float: left; /*所有条目内容向左侧浮动*/
            font-style: normal; /*em本为斜体，这里更改为普通字体*/
            height: 14px;
            line-height: 14px; /*行高设置与高度一样，字体有垂直中间的效果*/
            margin: 5px 0px; /*上下设置外边距*/
            padding: 0 8px; /*左右设置内边距*/
        }

            .subitem em a {
                color: #666; /*设置字体颜色*/
                white-space: nowrap; /*设置文本就算在长也不允许换行*/
                font-size: 12px;
                font-weight: normal;
                padding: 0px;
            }

            .subitem em.noborder { /*设置最后一个元素  右侧的边框取消*/
                border-right: 0 none;
            }
    </style>
</head>
<body>
    <div id="nav" class="mainNav">
        <ul class="nav">
            <li><a href="#">首 页</a></li>
            <li><a href="#">品 牌</a>
                <div class="jnNav">
                    <div class="subitem">
                        <dl class="fore">
                            <dt>
                                <a href="#nogo">品牌：</a>
                            </dt>
                            <dd>
                                <em><a href="#">耐克</a></em>
                                <em><a href="#">阿迪达斯</a></em>
                                <em><a href="#">达芙妮</a></em>
                                <em><a href="#">李宁</a></em>
                                <em><a href="#">安踏</a></em>
                                <em><a href="#">奥康</a></em>
                                <em><a href="#">骆驼</a></em>
                                <em><a href="#">特步</a></em>
                                <em><a href="#">耐克</a></em>
                                <em><a href="#">阿迪达斯</a></em>
                                <em><a href="#">达芙妮</a></em>
                                <em><a href="#">李宁</a></em>
                                <em class="noborder"><a href="#nogo">特步</a></em>
                            </dd>
                        </dl>
                        <dl>
                            <dt>
                                <a href="#nogo">品牌：</a>
                            </dt>
                            <dd>
                                <em><a href="#">耐克</a></em>
                                <em><a href="#">阿迪达斯</a></em>
                                <em><a href="#">达芙妮</a></em>
                                <em><a href="#">李宁</a></em>
                                <em><a href="#">安踏</a></em>
                                <em><a href="#">奥康</a></em>
                                <em><a href="#">骆驼</a></em>
                                <em><a href="#">特步</a></em>
                                <em><a href="#">耐克</a></em>
                                <em><a href="#">阿迪达斯</a></em>
                                <em><a href="#">达芙妮</a></em>
                                <em><a href="#">李宁</a></em>
                                <em class="noborder"><a href="#nogo">特步</a></em>
                            </dd>
                        </dl>
                    </div>
                </div>
            </li>
            <li><a href="#">女 装</a>
                <div class="jnNav">
                    <div class="subitem">
                        <dl class="fore">
                            <dt>
                                <a href="#nogo">女 装：</a>
                            </dt>
                            <dd>
                                <em><a href="#nogo">耐克</a></em>
                                <em><a href="#nogo">阿迪达斯</a></em>
                                <em><a href="#nogo">达芙妮</a></em>
                                <em><a href="#nogo">李宁</a></em>
                                <em><a href="#nogo">安踏</a></em>
                                <em><a href="#nogo">奥康</a></em>
                                <em><a href="#nogo">骆驼</a></em>
                                <em><a href="#nogo">特步</a></em>
                                <em><a href="#nogo">耐克</a></em>
                                <em><a href="#nogo">阿迪达斯</a></em>
                                <em><a href="#nogo">达芙妮</a></em>
                                <em><a href="#nogo">李宁</a></em>
                                <em class="noborder"><a href="#nogo">特步</a></em>
                            </dd>
                        </dl>
                        <dl>
                            <dt>
                                <a href="#nogo">女 装：</a>
                            </dt>
                            <dd>
                                <em><a href="#nogo">耐克</a></em>
                                <em><a href="#nogo">阿迪达斯</a></em>
                                <em><a href="#nogo">达芙妮</a></em>
                                <em><a href="#nogo">李宁</a></em>
                                <em><a href="#nogo">安踏</a></em>
                                <em><a href="#nogo">奥康</a></em>
                                <em><a href="#nogo">骆驼</a></em>
                                <em><a href="#nogo">特步</a></em>
                                <em><a href="#nogo">耐克</a></em>
                                <em><a href="#nogo">阿迪达斯</a></em>
                                <em><a href="#nogo">达芙妮</a></em>
                                <em><a href="#nogo">李宁</a></em>
                                <em class="noborder"><a href="#nogo">特步</a></em>
                            </dd>
                        </dl>
                    </div>
                </div>
            </li>
            <li><a href="#">男 装</a>
                <div class="jnNav">
                    <div class="subitem">
                        <dl class="fore">
                            <dt>
                                <a href="#nogo">男 装：</a>
                            </dt>
                            <dd>
                                <em><a href="#nogo">耐克</a></em>
                                <em><a href="#nogo">阿迪达斯</a></em>
                                <em><a href="#nogo">达芙妮</a></em>
                                <em><a href="#nogo">李宁</a></em>
                                <em><a href="#nogo">安踏</a></em>
                                <em><a href="#nogo">奥康</a></em>
                                <em><a href="#nogo">骆驼</a></em>
                                <em><a href="#nogo">特步</a></em>
                                <em><a href="#nogo">耐克</a></em>
                                <em><a href="#nogo">阿迪达斯</a></em>
                                <em><a href="#nogo">达芙妮</a></em>
                                <em><a href="#nogo">李宁</a></em>
                                <em class="noborder"><a href="#nogo">特步</a></em>
                            </dd>
                        </dl>
                        <dl>
                            <dt>
                                <a href="#nogo">男 装：</a>
                            </dt>
                            <dd>
                                <em><a href="#nogo">耐克</a></em>
                                <em><a href="#nogo">阿迪达斯</a></em>
                                <em><a href="#nogo">达芙妮</a></em>
                                <em><a href="#nogo">李宁</a></em>
                                <em><a href="#nogo">安踏</a></em>
                                <em><a href="#nogo">奥康</a></em>
                                <em><a href="#nogo">骆驼</a></em>
                                <em><a href="#nogo">特步</a></em>
                                <em><a href="#nogo">耐克</a></em>
                                <em><a href="#nogo">阿迪达斯</a></em>
                                <em><a href="#nogo">达芙妮</a></em>
                                <em><a href="#nogo">李宁</a></em>
                                <em class="noborder"><a href="#nogo">特步</a></em>
                            </dd>
                        </dl>
                    </div>
                </div>
            </li>
            <li><a href="#">鞋包配饰</a></li>
        </ul>
    </div>
</body>
</html>